<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>个人中心</title>
</head>
<body>
    <div layout:fragment="content" class="fade-in">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-user-circle me-2"></i>个人中心</h2>
            <div>
                <a href="/items/new" class="btn btn-primary">
                    <i class="fas fa-plus me-2"></i>发布新信息
                </a>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-user me-2"></i>用户信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <div class="avatar-circle">
                                <span class="avatar-text" th:text="${user.username.substring(0, 1).toUpperCase()}">U</span>
                            </div>
                        </div>
                        <h4 class="text-center mb-3" th:text="${user.username}">用户名</h4>
                        <p class="text-center text-muted" th:text="${user.email}">用户邮箱</p>
                        <hr>
                        <div class="d-flex justify-content-between text-center">
                            <div>
                                <h5 th:text="${publishedItems.size()}">0</h5>
                                <small class="text-muted">发布物品</small>
                            </div>
                            <div>
                                <h5 th:text="${approvedClaims.size() + pendingClaims.size() + rejectedClaims.size()}">0</h5>
                                <small class="text-muted">认领物品</small>
                            </div>
                            <div>
                                <h5 th:text="${completedItems.size()}">0</h5>
                                <small class="text-muted">已完成</small>
                            </div>
                        </div>
                        
                        <!-- 添加退出登录按钮 -->
                        <div class="mt-4 text-center">
                            <form th:action="@{/logout}" method="post">
                                <button type="submit" class="btn btn-danger">
                                    <i class="fas fa-sign-out-alt me-2"></i>退出登录
                                </button>
                            </form>
                            <small class="text-muted mt-2">点击退出将返回到登录页面</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" id="profileTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="published-tab" data-bs-toggle="tab" data-bs-target="#published" type="button" role="tab" aria-controls="published" aria-selected="true">
                                    <i class="fas fa-list me-1"></i> 我发布的
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="claimed-tab" data-bs-toggle="tab" data-bs-target="#claimed" type="button" role="tab" aria-controls="claimed" aria-selected="false">
                                    <i class="fas fa-hand-holding-heart me-1"></i> 我认领的
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="completed-tab" data-bs-toggle="tab" data-bs-target="#completed" type="button" role="tab" aria-controls="completed" aria-selected="false">
                                    <i class="fas fa-check-circle me-1"></i> 已完成的
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="profileTabsContent">
                            <!-- 我发布的物品 -->
                            <div class="tab-pane fade show active" id="published" role="tabpanel" aria-labelledby="published-tab">
                                <div th:if="${publishedItems.isEmpty()}" class="text-center py-5">
                                    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                                    <p class="lead">您还没有发布过物品信息</p>
                                    <a href="/items/new" class="btn btn-primary mt-3">
                                        <i class="fas fa-plus me-2"></i>发布新信息
                                    </a>
                                </div>
                                
                                <div th:unless="${publishedItems.isEmpty()}" class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>标题</th>
                                                <th>类型</th>
                                                <th>状态</th>
                                                <th>发布时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr th:each="item : ${publishedItems}">
                                                <td>
                                                    <a th:href="@{/items/{id}(id=${item.id})}" th:text="${item.title}">物品标题</a>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary" th:text="${item.type.displayName}">类型</span>
                                                </td>
                                                <td>
                                                    <span class="badge" th:classappend="${
                                                        item.status.name() == 'LOST' ? 'bg-danger' : 
                                                        item.status.name() == 'FOUND' ? 'bg-success' : 
                                                        'bg-info'
                                                    }" th:text="${item.status.displayName}">状态</span>
                                                </td>
                                                <td th:text="${#temporals.format(item.createdAt, 'yyyy-MM-dd HH:mm')}">发布时间</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-sm btn-outline-primary">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                        <a th:href="@{/items/{id}/edit(id=${item.id})}" class="btn btn-sm btn-outline-secondary">
                                                            <i class="fas fa-edit"></i>
                                                        </a>
                                                        <a th:if="${item.status.name() != 'COMPLETED'}" th:href="@{/claims/item/{id}(id=${item.id})}" class="btn btn-sm btn-outline-info">
                                                            <i class="fas fa-list"></i>
                                                        </a>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 我认领的物品 -->
                            <div class="tab-pane fade" id="claimed" role="tabpanel" aria-labelledby="claimed-tab">
                                <ul class="nav nav-pills mb-3" id="claimsTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="pending-claims-tab" data-bs-toggle="pill" data-bs-target="#pending-claims" type="button" role="tab" aria-controls="pending-claims" aria-selected="true">
                                            待处理 <span class="badge bg-warning" th:text="${pendingClaims.size()}">0</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="approved-claims-tab" data-bs-toggle="pill" data-bs-target="#approved-claims" type="button" role="tab" aria-controls="approved-claims" aria-selected="false">
                                            已批准 <span class="badge bg-success" th:text="${approvedClaims.size()}">0</span>
                                        </button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="rejected-claims-tab" data-bs-toggle="pill" data-bs-target="#rejected-claims" type="button" role="tab" aria-controls="rejected-claims" aria-selected="false">
                                            已拒绝 <span class="badge bg-danger" th:text="${rejectedClaims.size()}">0</span>
                                        </button>
                                    </li>
                                </ul>
                                
                                <div class="tab-content" id="claimsTabContent">
                                    <!-- 待处理认领 -->
                                    <div class="tab-pane fade show active" id="pending-claims" role="tabpanel" aria-labelledby="pending-claims-tab">
                                        <div th:if="${pendingClaims.isEmpty()}" class="text-center py-5">
                                            <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                                            <p class="lead">暂无待处理的认领</p>
                                        </div>
                                        
                                        <div th:unless="${pendingClaims.isEmpty()}" class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>物品名称</th>
                                                        <th>认领时间</th>
                                                        <th>状态</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="claim : ${pendingClaims}">
                                                        <td>
                                                            <a th:href="@{/items/{id}(id=${claim.item.id})}" th:text="${claim.item.title}">物品名称</a>
                                                        </td>
                                                        <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm')}">认领时间</td>
                                                        <td>
                                                            <span class="badge bg-warning" th:text="${claim.status.displayName}">待处理</span>
                                                        </td>
                                                        <td>
                                                            <a th:href="@{/claims/{id}(id=${claim.id})}" class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-eye"></i> 查看详情
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    <!-- 已批准认领 -->
                                    <div class="tab-pane fade" id="approved-claims" role="tabpanel" aria-labelledby="approved-claims-tab">
                                        <div th:if="${approvedClaims.isEmpty()}" class="text-center py-5">
                                            <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                                            <p class="lead">暂无已批准的认领</p>
                                        </div>
                                        
                                        <div th:unless="${approvedClaims.isEmpty()}" class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>物品名称</th>
                                                        <th>认领时间</th>
                                                        <th>处理时间</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="claim : ${approvedClaims}">
                                                        <td>
                                                            <a th:href="@{/items/{id}(id=${claim.item.id})}" th:text="${claim.item.title}">物品名称</a>
                                                        </td>
                                                        <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm')}">认领时间</td>
                                                        <td th:text="${#temporals.format(claim.processedTime, 'yyyy-MM-dd HH:mm')}">处理时间</td>
                                                        <td>
                                                            <a th:href="@{/claims/{id}(id=${claim.id})}" class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-eye"></i> 查看详情
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    
                                    <!-- 已拒绝认领 -->
                                    <div class="tab-pane fade" id="rejected-claims" role="tabpanel" aria-labelledby="rejected-claims-tab">
                                        <div th:if="${rejectedClaims.isEmpty()}" class="text-center py-5">
                                            <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                                            <p class="lead">暂无已拒绝的认领</p>
                                        </div>
                                        
                                        <div th:unless="${rejectedClaims.isEmpty()}" class="table-responsive">
                                            <table class="table table-hover">
                                                <thead>
                                                    <tr>
                                                        <th>物品名称</th>
                                                        <th>认领时间</th>
                                                        <th>处理时间</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr th:each="claim : ${rejectedClaims}">
                                                        <td>
                                                            <a th:href="@{/items/{id}(id=${claim.item.id})}" th:text="${claim.item.title}">物品名称</a>
                                                        </td>
                                                        <td th:text="${#temporals.format(claim.claimTime, 'yyyy-MM-dd HH:mm')}">认领时间</td>
                                                        <td th:text="${#temporals.format(claim.processedTime, 'yyyy-MM-dd HH:mm')}">处理时间</td>
                                                        <td>
                                                            <a th:href="@{/claims/{id}(id=${claim.id})}" class="btn btn-sm btn-outline-primary">
                                                                <i class="fas fa-eye"></i> 查看详情
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 已完成的物品 -->
                            <div class="tab-pane fade" id="completed" role="tabpanel" aria-labelledby="completed-tab">
                                <div th:if="${completedItems.isEmpty()}" class="text-center py-5">
                                    <i class="fas fa-info-circle fa-3x text-muted mb-3"></i>
                                    <p class="lead">暂无已完成的物品</p>
                                </div>
                                
                                <div th:unless="${completedItems.isEmpty()}" class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>标题</th>
                                                <th>类型</th>
                                                <th>认领者</th>
                                                <th>认领时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr th:each="item : ${completedItems}">
                                                <td>
                                                    <a th:href="@{/items/{id}(id=${item.id})}" th:text="${item.title}">物品标题</a>
                                                </td>
                                                <td>
                                                    <span class="badge bg-secondary" th:text="${item.type.displayName}">类型</span>
                                                </td>
                                                <td th:text="${item.claimedBy != null ? item.claimedBy.username : '未知'}">认领者</td>
                                                <td th:text="${item.claimedAt != null ? #temporals.format(item.claimedAt, 'yyyy-MM-dd HH:mm') : '未知'}">认领时间</td>
                                                <td>
                                                    <a th:href="@{/items/{id}(id=${item.id})}" class="btn btn-sm btn-outline-primary">
                                                        <i class="fas fa-eye"></i> 查看详情
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <style>
        .avatar-circle {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }
        
        .avatar-text {
            color: white;
            font-size: 48px;
            font-weight: bold;
        }
    </style>
</body>
</html> 